<template>
  <view>
    <yy-paging
      v-model="dataList"
      @query="queryList"
      ref="paging"
      :auto="automatic"
      @scroll="scroll"
      :refresher-enabled="false"
    >
      <template #top>
        <u-navbar
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="line-clamp-1 flex col-span-1 justify-center">
              <view class="text-[#000] font-bold text-base"> 注销帐号 </view>
            </view>
            <view class="flex col-span-1 justify-end">
              <view class="text-[14px] text-[#5C6068]"> </view>
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <!-- {{ vk.getVuex('$user.userInfo.mobile') }} -->
      <view class="flex flex-col gap-5 p-4">
        <view class="flex flex-col gap-2">
          <view class="text-[1.25rem] text-[#161A24] font-bold"> 注销账号确认</view>
          <view class="text-[.875rem] text-[#161A24]"
            >将{{ vk.pubfn.hidden(vk.getVuex('$user.userInfo.mobile'), 3, 4) }}所绑定的账号注销：</view
          >
        </view>
        <view class="bg-[#FFFFFF] rounded-[1rem] py-8 px-6 flex flex-col gap-5">
          <view class="flex justify-center">
            <image src="/static/dddr99.png" class="size-7" mode="aspectFill" />
          </view>
          <view class="text-[.875rem] text-[#5C6068]"> 在开始注销之前，请确认以下内容： </view>
          <u-line></u-line>
          <view class="flex flex-col gap-3" v-for="(i, k) in list" :key="k">
            <view class="flex gap-1 items-center">
              <view class="w-[.375rem] h-[.375rem] bg-[#00A9AB] rounded-full"></view>
              <view class="text-[1rem] text-[#161A24] font-bold">{{ i.title }}</view>
            </view>
            <view class="text-[.8125rem] text-[#5C6068]">{{ i.describe }}</view>
          </view>
        </view>
        <view class="flex justify-center mt-3">
          <view
            class="h-[2.75rem] bg-[#00A9AB] w-2/3 text-[1rem] text-[#FFFFFF] font-bold rounded-full grid place-content-center btn"
            @click="vk.navigateTo('/pages/my/property')"
          >
            开始注销
          </view>
        </view>
      </view>
    </yy-paging>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        loading: false, // 加载状态
        list: [
          {
            title: '账号无任何资产',
            describe: '账号资产包括但不限于收益余额等。'
          },
          {
            title: '个人权益失效',
            describe: '您将自愿放弃此帐号下所有个人权益。'
          },
          {
            title: '账号将不可找回',
            describe: '绑定的手机号会在注销操作后完成解除，解除后您可再次注册新的账号。'
          }
        ]
      }
    },

    methods: {
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
